<template>
  <div class="update-card-info" :class="theme">
     <div class="container">
         <div class="card">
            <div class="card-cell">
              <span class="cell-label">银行卡号</span>
              <span class="cell-content btn-color" v-html="formatCardNo(info.cardNo)"></span>
            </div>
            <div class="card-cell">             
              <span class="cell-label">CVN2</span>
              <span class="cell-content" v-html="info.securityCode"></span>
            </div>             
            <div class="card-cell">
              <span class="cell-label">有效期</span>
              <span class="cell-content" v-html="info.expiredTime"></span>
            </div>
         </div>
         <div class="card cell-input">
            <div class="card-cell">
              <span class="cell-label">账单日</span>
              <span class="cell-content">
                <datetime
                  v-model="info.billDay"
                  format="DD" 
                  placeholder="设置账单日"
                  title=""
                  ></datetime>
               </span>
            </div>
            <div class="card-cell">             
              <span class="cell-label">还款日</span>
              <span class="cell-content">
                <datetime
                  v-model="info.repaymentDay" 
                  format="DD" 
                  placeholder="设置还款日"
                  title=""
                  ></datetime>
              </span>
            </div>             
            <div class="card-cell">
              <span class="cell-label">信用额度</span>
              <span class="cell-content">
                <x-input title='' :is-type="credit" 
                  keyboard="number"
                  placeholder="设置信用额度"
                  text-align="right"
                  pattern="^[1-9][0-9]*"
                  :show-clear="false"
                  required  
                  v-model="info.creditBlance">
                </x-input>
              </span>
            </div>
         </div>
         <div class="button-box">
            <div class="button bg-color" @click="submitInfo">提&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;交</div>
         </div>
      </div>
  </div>
</template>

<script>
import {Datetime,XInput} from 'vux';
export default {
  name:'',
  data () {
    return {
        theme:"407",
         info:{
          userId:null,
          cardNo: "8888 **** **** 8888",
          securityCode: "--",
          expiredTime: "--",
          billDay: '',
          repaymentDay: '',
          creditBlance: ''
        }, 
        credit:function(value){
          return {
            valid: value>=500 && value <=10000000 , // && /^[1-9][0-9]*/
            msg: '输入值在500到10000000之间！'
          }
        }
    };
  },
  components: {Datetime,XInput},
  created() {this.init();},
  mounted() {},
  methods: {
    init(){
      // 获取路由中的数据
        let info = this.$route.params.card;
        this.info.userId = info.userId;
        this.info.cardNo = info.cardNo;
        this.info.securityCode = info.securityCode;
        this.info.expiredTime = info.expiredTime;
        this.info.billDay = info.billDay.toString();
        this.info.repaymentDay = info.repaymentDay.toString();
        this.info.creditBlance = info.creditBlance
    },
    checkInfo(){
      let status = true;
      this.info.billDay === null && (()=>{
          this.$vux.alert.show({
              content:"请设置账单日期！"
          })
          status=false;
      })();
      status && this.info.repaymentDay === null && (()=>{
          this.$vux.alert.show({
              content:"请设置还款日期！"
          })
          status=false;
      })();
      status && !/^([1-9][0-9]*)$/.test(this.info.creditBlance) && (()=>{
          this.$vux.alert.show({
              content:"请设置正确的信用额度！"
          })
          status=false;
    })()
      return status;
    },
    formatCardNo(cardNo){
      if(cardNo ===null){
        return 'null'
      }
      cardNo =  '' + cardNo;   
      return cardNo.slice(0,4)+ ' **** **** ' +cardNo.slice(-4);
    },
    submitInfo(){
      if(this.checkInfo()){
          this.$vux.loading.show()
          // console.log(this.info);
          // http请求 提交修改的数据
          let userId = this.info.userId,
              cardNo = this.info.cardNo,
              securityCode = this.info.securityCode,
              expiredTime = this.info.expiredTime,
              billDay = +this.info.billDay,
              repaymentDay = +this.info.repaymentDay,
              creditBlance = this.info.creditBlance
          let url = "user/bank/set/bankinfo",
              params = `userId=${userId}&bankCardNumber=${cardNo}&securityCode=${securityCode}&expiredTime=${expiredTime}&billDay=${billDay}&repaymentDay=${repaymentDay}&creditBlance=${creditBlance}`;
          this.$Http.post(url,params).then((res)=>{
              this.$vux.loading.hide()
              if(res.data.resp_code === "000000"){
                  // 修改成功 跳转首页

                  this.$router && this.$router.back();
              }
              this.$vux.alert.show({
                  title:'温馨提示',
                  content:res.data.resp_message
              })
          }).catch((err)=>{
              this.$vux.loading.hide()
              // console.log("请求失败",err);
              this.$vux.alert.show({
                    title:'温馨提示',
                    content:"修改银行卡数据失败！"
                })
          })
      } 
      
    }
  }
}

</script>
<style scoped>
.update-card-info{
    width: 100%;
    height: 100%;
    font-size: 1.065rem;
    box-sizing: border-box;
     overflow-y: scroll;
    overflow-x: hidden;
  }
  .container{
     width: 100%;
     box-sizing: border-box;
  }
  .card{
    margin-top: 0.625rem;
    padding-left:  1.25rem;
    background-color: #ffffff;
  }
  .card-cell{
    box-sizing: border-box;
    padding: 0.75rem 1.25rem 0.75rem 0;
    border-bottom: 1px solid #F5F5F5;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .cell-label{
    display: inline-block;
    font-size: 1.0625rem;
    min-width:4.375rem;
    width:4.375rem;
    line-height: 1.5rem;
    height: 1.5rem;
  }
  
  .cell-content{
    display: inline-block;
    font-size: 0.875rem;
    flex-grow: 1;
    text-align: right;
    /* height: 1.25rem;
    line-height: 1.25rem; */
    padding-left: 1rem;
    box-sizing: border-box;
    
  }
  
 
  .button-box{
    padding-top: 2.09375rem;
    text-align: center;
  }
  /* .calendar-picker{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  } */
  .button{
    display: inline-block;
    width: 21.25rem;
    height: 2.8125rem;
    border-radius: 2px;
    color:#ffffff;
    font-size: 0.9375rem;
    background-color: #8b4dbd;
    line-height: 2.8125rem;
  }
  .vux-cell-value{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  input:focus{
    box-sizing: border-box !important;
    padding-right: 0.65rem!important;
  }
  a{
        text-decoration: none;
    }
</style>